<template>
  <div class="masen-about">
    <banner-two></banner-two>
    <div class="masen-container">
      <div class="masen-about-main">
<!--        <div class="about-left-nav">-->
<!--          <ul>-->
<!--            <li v-for="item in navList" :key="item.title" @click="setId(item.id)">-->
<!--              <router-link v-bind:to="'/home/about/'+item.id">{{item.title}}</router-link>-->
<!--              <span><svg-icon icon-class="right"></svg-icon></span>-->
<!--            </li>-->
<!--                  <li><router-link to="#">资质荣誉</router-link><span><svg-icon icon-class="right"></svg-icon></span></li>-->
<!--                  <li><router-link to="#">企业文化</router-link><span><svg-icon icon-class="right"></svg-icon></span></li>-->
<!--                  <li><router-link to="#">联系我们</router-link><span><svg-icon icon-class="right"></svg-icon></span></li>-->
<!--          </ul>-->
<!--        </div>-->
          <left-nav :nav-list="navList" @fatherMethods="fatherMethods" />
          <article-company :content-info="contentInfo"></article-company>
    </div>
    </div>
    </div>
</template>

<script>
import BannerTwo from './components/BannerTwo'
import LeftNav from './components/LeftNav'
import ArticleCompany from './components/ArticleCompany'
import { getAboutList, getContentById } from '../api/about'
export default {
  name: 'about',
  data() {
    return {
      navList: [
        { title: '公司介绍', id: '3' },
        { title: '资质荣誉', id: '4' },
        { title: '企业文化', id: '2' },
        { title: '联系我们', id: '1' }
      ],
      contentInfo: {
        title: '公司介绍',
        content: "<p>郑州玛森电子科技有限公司，注册成立于2017年，是中原地区一家专业为企业和个人提供互联网增值服务、互联网语音、视频通话、互联网+软件开发、移动客户端开发、互联网和运营商渠道资源分销、IDC资源分销的公司。 主要为全国各大中小型企业提供企业所需的互联网解决方案，云呼中心建立（含资源）， 为用户提供优质、稳定、便捷的互联网体验，业务辐射国内的商务、维护、服务网络等。</p><img src='/imgs/scheme/content-01.png'>\n"
      }
    }
  },
  components: { BannerTwo, LeftNav, ArticleCompany },
  mounted () {
    this.getList()
    this.getContent(this.$route.params)
  },
  methods: {
    fatherMethods(item) {
      this.contentInfo = item
    },
    getList() {
      getAboutList().then((response) => {
        const { result } = response.data
        this.navList = result
      })
    },
    getContent(num) {
      const postData = {
        id: num
      }
      getContentById(postData).then((response) => {
        this.contentInfo = response.data
      }).catch(() => {
        setTimeout(() => {
          this.$router.back()
        }, 1000)
      })
    }
  }
}
</script>

<style lang="scss">
  @import "../assets/scss/mixin.scss";
  @import "../assets/scss/button";
  .masen-about{
    .masen-container{
      .masen-about-main{
        margin-top: 80px;
        display: flex;
        .about-right-main{
          display: inline-block;
          width: 815px;
          .scheme-warp-title{
              text-align: center;
              font-size: 30px;
              color: #333333;
              padding-bottom: 40px;
              &:after{
                content: '';
                margin: 30px auto 0px auto;
                @include borderSet(40px,2px);

              }
          }
          .company-content{
            padding: 0px 70px;
            display: block;
            p{
              font-size: 20px;
              color: #999999;
              letter-spacing: 2px;
              line-height: 30px;
            }
            img{
              padding-top: 70px;
              max-width: 100%;
            }
          }
        }
      }
    }
  }

</style>
